<h1 class="page-title">
  <span class="text-truncate">
    Application <strong>{{ app.name }}</strong
    >&nbsp;
    <span class="{{ app.labelTypeClass() }}">{{ app.type }}</span>
    <span *ngIf="defaultApp" class="label">{{ defaultApp.version }}</span>
  </span>
</h1>

<div *ngIf="!loading">
  <div class="datagrid-action-bar" [appRole]="['ROLE_DESTROY']">
    <button id="btnUnregister" type="button" class="btn btn-sm btn-outline-danger" (click)="unregister()">
      Unregister Application
    </button>
    <button
      id="btnVersion"
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="manageVersions()"
      *ngIf="versions?.length > 1"
    >
      Manage versions
    </button>
  </div>

  <div class="title-select" *ngIf="detailedApp && versions?.length > 1">
    Version
    <clr-dropdown>
      <button class="btn btn-sm btn-secondary" clrDropdownTrigger>
        {{ detailedApp.version }}&nbsp;
        <span *ngIf="detailedApp.defaultVersion">(DEFAULT)</span>
        <clr-icon shape="caret down"></clr-icon>
      </button>
      <clr-dropdown-menu *clrIfOpen>
        <button
          [class.active]="version.version === detailedApp.version"
          *ngFor="let version of versions"
          clrDropdownItem
          (click)="getProperties(version)"
        >
          {{ version.version }}&nbsp;
          <span *ngIf="version.defaultVersion">(DEFAULT)</span>
        </button>
      </clr-dropdown-menu>
    </clr-dropdown>
  </div>

  <div class="clr-row">
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Information" name="{{ app.name }}.{{ app.type }}" keyContext="app" id="info">
        <ng-template>
          <div *ngIf="!loadingProperties">
            <div class="block card-block-keyvalue">
              <div class="row">
                <div class="key">Type</div>
                <div class="value">
                  <span class="{{ app.labelTypeClass() }}">{{ app.type }}</span>
                </div>
              </div>
              <div class="row">
                <div class="key">Version</div>
                <div class="value">
                  <span *ngIf="defaultApp" class="label">{{ defaultApp.version }}</span>
                </div>
              </div>
              <div *ngIf="detailedApp.uri" class="row">
                <div class="key">Uri</div>
                <div class="value">{{ detailedApp.uri }}</div>
              </div>
              <div class="row">
                <div class="key">Metadata Uri</div>
                <div class="value">{{ detailedApp.metaDataUri || 'N/A' }}</div>
              </div>
              <div class="row" *ngIf="versions">
                <div class="key">Version(s)</div>
                <div class="value">{{ versions.length }}</div>
              </div>
            </div>
          </div>
          <div *ngIf="loadingProperties">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading information...
          </div>
        </ng-template>
      </app-view-card>
    </div>
  </div>

  <div>
    <div class="clr-row">
      <div class="clr-col-lg-12 clr-col-md-12 clr-col-12">
        <app-view-card
          titleModal="Application properties"
          name="{{ app.name }}.{{ app.type }}"
          keyContext="app"
          id="props"
        >
          <ng-template>
            <div *ngIf="!loadingProperties">
              <div class="block card-block-keyvalue" *ngIf="detailedApp.options?.length > 0">
                <div
                  *ngIf="tooManyProperties && !showAllProperties"
                  class="alert alert-info"
                  role="alert"
                  style="margin-top: 8px"
                >
                  <div class="alert-items">
                    <div class="alert-item static">
                      <div class="alert-icon-wrapper">
                        <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
                      </div>
                      <div class="alert-text">
                        There are <strong>more than 50 properties</strong> to display, the UI can be slow.<br />Do you
                        want to <strong>display all the properties</strong> ?
                      </div>
                    </div>
                    <div class="alert-item static">
                      <div class="alert-item static">
                        <div class="alert-icon-wrapper"></div>
                      </div>
                      <div class="alert-text">
                        <button class="btn btn-primary btn-sm" (click)="showAllProperties = true">
                          Show all the properties
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <div *ngIf="showAllProperties">
                  <table>
                    <tbody>
                      <tr *ngFor="let property of detailedApp.options | orderby: 'name':'ASC'">
                        <td class="key">
                          {{ getReadableId(property.id) }}
                          <div *ngIf="property.isDeprecated">
                            <span class="label label-warning">Deprecation level: {{ property.deprecation.level }}</span>
                          </div>
                        </td>
                        <td class="value">
                          <div class="value">
                            <div>{{ property.description ? property.description : '(No Description Available)' }}</div>
                            <div class="type-block">
                              <code>{{ property.type }}</code
                              >&nbsp;<span *ngIf="property.defaultValue"
                                >(Default value: <code>{{ property.defaultValue }}</code
                                >)</span
                              >
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div *ngIf="!(detailedApp.options?.length > 0)">No property</div>
            </div>
            <div *ngIf="loadingProperties">
              <clr-spinner clrInline clrSmall></clr-spinner>
              Loading properties...
            </div>
          </ng-template>
        </app-view-card>
      </div>
    </div>
  </div>
</div>

<div *ngIf="loading" style="padding: 1rem 0">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading application...
</div>

<app-unregister #unregisterModal (onUnregistered)="back()"></app-unregister>
<app-version #versionModal (onChange)="getVersions()"></app-version>
